<template>
    <div class="home">
        <van-nav-bar fixed placeholder>
            <template #left>
                <van-icon name="revoke" @click="back" />
            </template>
            <template #title>
                ChatRoom
            </template>
        </van-nav-bar>
        <video id="myVideo" class="video-js vjs-default-skin" width="399px" autoplay="false" preload="auto">
            <source :src="src" type="application/x-mpegURL" />
        </video>
        <van-divider content-position="left">评论区</van-divider>
        <van-row>
            <van-col class="say" span="24" v-for="(item, i) in list" :key="i">
                <van-image class="photo" round height="1.6rem" :src="'data:image/png;base64,' + item.photo"
                    @click="seeOne(item.userId)" />

                &nbsp;<span class="author">{{ item.username }}</span>
                <div>
                    &nbsp;<span class="content">{{ item.message }}</span>
                </div>

                <div>
                    &nbsp;<span class=" time">发布时间:{{ item.createTime }}</span>
                </div>
            </van-col>
        </van-row>



        <van-row class="button-mes">
            <van-col span="20">
                <van-field class="message" v-model="message" rows="1" autosize label="留言" type="textarea"
                    placeholder="请输入留言" @input="inputArea()" />
            </van-col>
            <van-col span="4">
                <van-button class="sub" v-show="show" round type="info" @click="submit">发布</van-button>
            </van-col>
        </van-row>
    </div>
</template>

<script>

import videojs from "video.js";
import 'video.js/dist/video-js.css'
import "videojs-contrib-hls";     // 支持 m3u8 格式、并且是 hls 流，因为videojs支持多平台播放，主要用以兼容处理


export default {
    data() {
        return {
            src: '',
            content: '',
            message: '',
            show: false,
            list: [],
            rootId: 0,
        };
    },

    created() {
        const url = this.$route.query.url
        this.src = url

    },
    mounted() {
        this.getVideo();   // 如果出现获取不到dom 可以用异步处理一下
        if (location.href.indexOf("#reloaded") == -1) {
            location.href = location.href + "#reloaded";
            location.reload();
        }
    },
    methods: {
        seeOne(userId) {
            this.$router.push({ path: '/seeOne', query: { userId: userId } })
        },
        submit() {
            // const tel = window.localStorage.getItem('dazi_')
            // const mes = {
            //     roomId: this.content.id,
            //     tel: tel,
            //     message: this.message
            // }

            // this.$axios.post('http://localhost:9090/dazi/content/message/save', mes)
            //     .then(res => {
            //         this.message = ''
            //         this.$axios.get('http://localhost:9090/dazi/content/message/findByContentId?contentId=' + this.content.id)
            //             .then(res => {
            //                 this.list = res.data;
            //             })
            //     })
        },

        inputArea() {
            if (this.message.length > 0) {
                this.show = true
            } else {
                this.show = false
            }
        },
        getVideo() {
            // window.location.reload()
            videojs('myVideo', {
                controls: true, // 是否显示控制条
                bigPlayButton: true,
                textTrackDisplay: false,
                posterImage: true,  // 是否显示封面
                errorDisplay: false,
                controlBar: true,

            })
        },
        back() {
            history.back();
            history.back();
        },
    }

}
</script>
<style lang="scss" scoped>
.button-mes {
    position: fixed;
    left: 0;
    bottom: 10px;
}

.van-button--round {
    width: 70px;
}
</style>
